import React, { Component } from 'react'
import './index.css';
import Header from '../Header';
import Main from '../Main';
import Footer from '../Footer';
import { nanoid } from 'nanoid'


export default class App extends Component {

    state = {
        todos: [
            {id: 1, title: '媳妇儿过生日', done: false},
            {id: 2, title: '晚上买洗发水', done: false},
            {id: 3, title: '请男同事吃饭', done: true}
        ]
    }

    render() {
        let {todos} = this.state;
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo} />
                    <Main delete={this.delete} todos={todos}  checkTodo={this.checkTodo} />
                    <Footer clean={this.clean} checkTodoAll={this.checkTodoAll} todos={todos} />
                </div>
            </div>
        )
    }

    //声明方法新增一个任务
    addTodo = (title) => {
        //新增一个任务
        let todo = {
            id: nanoid(),
            title: title,
            done: false
        };
        //创建一个新的数组
        let newTodos = [...this.state.todos, todo];
        //设置
        this.setState({
            todos: newTodos
        })
    }

    //声明一个方法切换任务的状态   
    //  checkTodo(3, false)
    checkTodo = (id, status) => {
        let {todos} = this.state;
        //遍历
        // for(let i=0;i<todos.length;i++){
        //     //判断
        //     if(id === todos[i].id){
        //         todos[i].done = status;
        //     }
        // }

        //简便操作
        let newTodos = todos.map(item => {
            if(item.id === id) item.done = status;
            return item;
        })

        //设置
        this.setState({
            todos: newTodos
        })
    }

    //声明一个方法删除任务
    // delete(2)
    delete = (id) => {
        //获取 todos
        let {todos} = this.state;
        // 方式一   声明一个新数组  
        // let newTodos = [];
        // for(let i=0;i<todos.length;i++){
        //     if(id !== todos[i].id){
        //         newTodos.push(todos[i]);
        //     }
        // }
        //方式二 
        let newTodos = todos.filter(item => item.id !== id);
        //设置
        this.setState({
            todos: newTodos
        })
    }

    //声明一个方法 全部任务的状态切换
    // checkTodoAll(true);
    checkTodoAll = (status) => {
        //遍历
        let newTodos = this.state.todos.map(item => {
            item.done = status;
            return item;
        });
        this.setState({
            todos: newTodos
        })
    }

    //声明一个方法 清理已经完成的任务
    clean = () => {
        //获取 todos
        let {todos} = this.state;
        //清理
        let newTodos = todos.filter(item => !item.done);
        //设置
        this.setState({
            todos: newTodos
        })
    }

    componentDidMount(){
        // this.checkTodo(1, true);
        // this.checkTodo(3, false);
        // this.delete(2)
        // this.delete(1)
        // this.checkTodoAll(false);
    }

    
}
